.ml-5 {
  margin-left: 10rpx !important;
}

.ml-11 {
  margin-left: 22rpx;
}

.mt-17 {
  margin-top: 93rpx;
}

.mt-23 {
  margin-top: 46rpx;
}

.mt-13 {
  margin-top: 26rpx;
}

.ml-25 {
  margin-left: 50rpx;
}

.mt-5 {
  margin-top: 10rpx;
}

.mr-5 {
  margin-right: 10rpx !important;
}

.m-r-auto {
  margin-right: auto !important;
}

.color_2a3a6c {
  color: #2a3a6c !important;
}

.color_666 {
  color: #666 !important;
}

.main_title {
  margin-bottom: 20rpx;
  font-size: 38rpx;
}

.page {
  background-color: #f8f8f8;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;

  .group {
    padding-bottom: 10rpx;

    .section {
      padding: 24rpx 12rpx 8rpx 12rpx;
      background-image: linear-gradient(171.1deg, #1c2d62 0%, #1c2d63 -14.46%, #fff 46.78%, #ea602d00 100%);

      .self-stretch {
        padding-bottom: 8rpx;
        width: 100%;
        margin-top: 150rpx;

        .top-menu {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 32rpx 24rpx 0 24rpx;
          // background: #232f5b;
          border-radius: 0 0 32rpx 32rpx;
        }

        .menu-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 20%;
        }

        .menu-icon {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 8rpx;
        }

        .menu-text {
          color: #fff;
          font-size: 26rpx;
        }

        .banner-wrap {
          margin: 24rpx 24rpx 0 24rpx;
          border-radius: 16rpx;
          overflow: hidden;
          // border: 1rpx solid red;
          
          .banner {
            height: 300rpx;
            border-radius: 16rpx;
            overflow: hidden;
            
            .banner-content {
              width: 100%;
              height: 100%;
              position: relative;
              cursor: pointer;
              transition: transform 0.2s ease;
              
              &:active {
                transform: scale(0.98);
              }
              
              .image_10 {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 16rpx;
              }
            }
          }
        }

        .banner-img {
          width: 100%;
          height: 120rpx;
          object-fit: cover;
          display: block;
        }

        .filter-bar {
          display: flex;
          align-items: center;
          margin: 24rpx 24rpx 0 24rpx;
        }

        .filter-tab {
          background: #e6eaf5;
          color: #232f5b;
          font-size: 26rpx;
          border-radius: 20rpx;
          padding: 8rpx 28rpx;
          margin-right: 16rpx;
        }

        .filter-tab.active {
          background: #232f5b;
          color: #fff;
        }

        .filter-sort {
          margin-left: auto;
          display: flex;
          align-items: center;
          font-size: 24rpx;
        }

        .filter-sort text {
          margin-left: 24rpx;
          color: #232f5b;
        }

        .filter-sort .active {
          color: #213165;
          font-weight: bold;
        }

        .event-card {
          background: #fff;
          border-radius: 16rpx;
          margin: 24rpx 24rpx 0 24rpx;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
          overflow: hidden;
          position: relative;
        }

        .event-img {
          width: 100%;
          height: 260rpx;
          object-fit: cover;
          display: block;
        }

        .event-status {
          position: absolute;
          top: 16rpx;
          left: 16rpx;
          display: flex;
          align-items: center;
          font-size: 22rpx;
          border-radius: 16rpx;
          padding: 4rpx 18rpx;
          color: #fff;
          font-weight: bold;
        }

        .status-signup {
          background: #232f5b;
        }

        .status-end {
          background: #e53935;
        }

        .status-dot {
          width: 10rpx;
          height: 10rpx;
          background: #fff;
          border-radius: 50%;
          margin-right: 8rpx;
          display: inline-block;
        }

        .event-content {
          padding: 18rpx 18rpx 12rpx 18rpx;
        }

        .event-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #232f5b;
          margin-bottom: 12rpx;
        }

        .event-info {
          font-size: 22rpx;
          color: #666;
          margin: 20rpx 2rpx;;
          display: flex;
          align-items: center;
          .iconStyle{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
          }
        }

        .event-info .iconfont {
          margin-right: 8rpx;
          color: #b3b3b3;
          font-size: 22rpx;
        }

        .event-footer {
          display: flex;
          align-items: center;
          margin-top: 8rpx;
          color: #232f5b;
          font-size: 22rpx;
          font-weight: 500;
        }

        .event-footer .iconfont {
          margin-right: 6rpx;
          color: #232f5b;
          font-size: 22rpx;
        }

        .distance-text {
          font-size: 22rpx;
          font-weight: 500;
        }

        .footer-bar {
          background: #fff;
          border-radius: 16rpx 16rpx 0 0;
          margin: 32rpx 24rpx 0 24rpx;
          padding: 12rpx 0;
          display: flex;
          align-items: center;
          box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
        }

        .footer-logo {
          width: 160rpx;
          height: 70rpx;
          margin-left: 24rpx;
          margin-right: 24rpx;
        }

        .footer-menu {
          display: flex;
          flex: 1;
          justify-content: space-around;
        }

        .footer-menu-item {
          display: flex;
          // flex-direction: column;
          align-items: center;
          background: transparent;
          border: none;
          padding: 0;
          margin: 0;
          line-height: normal;
          font-size: inherit;
          
          &::after {
            border: none;
          }
        }

        .footer-menu-icon {
          width: 36rpx;
          height: 46rpx;
          margin-bottom: 4rpx;
          margin-right: 10rpx;
        }

        .footer-menu-text {
          font-size: 24rpx;
          color: #121212;
        }
      }
    }
  }
}